<template>
 <ul class="product-list clearfix">
        <li class="product-item" v-for="(product,index) in productList" :key="index">
            <router-link to="/goodDetail">
                <div class="pro-wrap">
                    <div class="pro-img">
                        <img :src="product.picUrl" alt="">
                    </div>
                    <h4 class="pro-title ui-ellipsis">{{product.mpName}}</h4>
                    <p class="pro-space"></p> 
                    <p class="pro-price">
                        <span class="price">￥{{product.price}}</span>
                    </p>
                    <p class="pro-talk ui-ellipsis">
                        <span class="talk-item">{{product.ratingCount}}</span>条评论
                        好评<span class="talk-item">{{product.positiveRate}}%</span>
                    </p>
                    <i class="icon-cart icons4"></i>
                </div>
            </router-link>
                
        </li>
</ul>
    
</template>
<script>
export default{
    props:{
        productList:Array
    }
}
</script>
<style>
.product-list{
    padding:.12rem .06rem .12rem .15rem;
    overflow:hidden;
}
.product-item{
    border-top:.09rem solid #f0f0f0;
    border-right:.09rem solid #f0f0f0;;
    margin-bottom:.03rem;
    width:50%;
    float:left;
    box-sizing:border-box;
}
.product-item img{
	width: 100%;
}
.pro-wrap{
    padding: .12rem .09rem;
    position:relative;
    background-color:#fff;
}
.pro-img{
    padding-bottom:.11rem;

}
.pro-title{
    height:.16rem;
    font-size:.13rem;
    color:#333;
    line-height:.16rem;
    font-weight:400;
}
.pro-space{
    height:.18rem;
}
.pro-price{
    height:.21rem;
}
.pro-talk{
    height:.16rem;
}
.icon-cart{
    width:.25rem;
    height:.25rem;
    position:absolute;
    right:.08rem;
    bottom:.09rem;
    background-position:-.37rem -2.45rem;
    background-color:#fff;
}
.price{
    color:#ff6900;
    font-size:.16rem;
}
.talk-item{
    color:#ff6900;
}
.product-item a{
    display:block;
}
</style>